import React from 'react';
import ReactDOM from 'react-dom';

let hookStates = []; // 保存所有状态的数组
let hookIndex = 0; // 默认 从第一个开始保存状态

function useRef(initialState) {
  hookStates[hookIndex] = hookStates[hookIndex] || { current: initialState };
  return hookStates[hookIndex++];
}

function useReducer(reducer, initialState) {
  hookStates[hookIndex] = hookStates[hookIndex] || initialState;
  let currentIndex = hookIndex;
  function dispatch(action) {
    // 这里只是基于了一个函数 来实现了状态初始化
    hookStates[currentIndex] = reducer
      ? reducer(hookStates[currentIndex], action)
      : action;
    render();
  }
  return [hookStates[hookIndex++], dispatch];
}

function useImperativeHandle(ref, handle) {
  ref.current = handle(); // 将函数执行后的结果赋予到current上
}
const ConuterContext = React.createContext(); // 创建一个上下文组件

//  父组件 想拿到子组建的dom元素
// 类组件中可以通过ref拿到组件的实例，但是函数式组件是没有实力的

function Child(props, inputRef) {
  // 可以将组件到处的变量数据 都放在里面
  useImperativeHandle(inputRef, () => ({
    focus() {
      console.log('ok');
    },
    blur() {
      console.log('blur');
    },
  }));
  return <input type="text"></input>;
}

const ForwardChild = React.forwardRef(Child);
function App() {
  const inputRef = useRef();

  function getFoucus() {
    console.log(inputRef.current);
    // inputRef.current.focus()
  }
  return (
    <div>
      <ForwardChild ref={inputRef}></ForwardChild>
      <button onClick={getFoucus}>获取焦点</button>
    </div>
  );
}

function render() {
  hookIndex = 0; // 保证每次渲染的时候 都是从0的开始 进行匹配获取状态
  ReactDOM.render(<App />, document.getElementById('root'));
}
render();

// 1) useState 我们将useState的状态 管理到数组里， 将索引和状态关联起来
// 2) 每次更新状态的时候 通过索引获取对应的状态，并进行更新
